<template>
    <div id="video-record">
        <el-dialog
            title="监控录制"
            v-model="drawerVisible" 
            draggable 
            :close-on-click-modal="false" 
            width="769px" 
            :before-close="handleClose"
            :destroy-on-close="true"
        >
            <div class="record-c">
                <iframe :src="iframePath" class="record-c-i" frameborder="0"></iframe>
            </div>
            <template #footer>
                <el-button type="primary" @click="handleClose">结束录制</el-button>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive , computed , toRef , toRefs , toRaw , onMounted } from 'vue'
import { SafetyHatGetKeyInfo } from '/@/api/its/its.ts'
export default defineComponent( {
    name: 'video-record',
    components: {},
    props: {
        drawerVisible:{
            type: Boolean,
            default: false,
        },
        isUseDialog: {
            type: String,
            default: ''
        }
    },
    setup(props,ctx){
        const iframePath = ref('')
        /*** handleClose 关闭按钮点击事件 */
        const handleClose = () => {
            ctx.emit('handleRecordClose')
        }

        /*** getRecordFun 获取key信息 */
        const getRecordFun = async () => {
            let res = await SafetyHatGetKeyInfo()
            if(res.success){
                console.log(res.data,'data')
                iframePath.value = 'https://jls.huaweisoft.com/#/realvideo?id=' + props.isUseDialog + '&appKey=' + res.data.aKey + '&secretKey=' + res.data.sKey
            }
        }

        onMounted(() => {
            getRecordFun()
            console.log(props.isUseDialog,'isUseDialog')
        })

        return {
            handleClose,
            drawerVisible: props.drawerVisible,
            iframePath,
        }
    },
} )
</script>
<style scoped lang="scss">
    .record-c{
        width: 100%;
        height: 400px;
        .record-c-i{
            width: 100%;
            height: 100%;
            margin: auto;
        }
    }
</style>